Skip to content

CSS Grid 9/9: Yoga Playground grid property support#1902

Open
intergalacticspacehighway wants to merge 10 commits intofacebook:mainfrom
intergalacticspacehighway:css-grid-10-playground
Open

CSS Grid 9/9: Yoga Playground grid property support#1902
intergalacticspacehighway wants to merge 10 commits intofacebook:mainfrom
intergalacticspacehighway:css-grid-10-playground

Conversation

@intergalacticspacehighway
Copy link
Contributor

Summary

  • Grid property support in the Yoga Playground website component
  • Display mode, template columns/rows, auto columns/rows
  • Column/row start/end (including span), track value parsing

Split from #1865. Depends on #1901. Merge after 8/9.

NickGerleman and others added 10 commits February 25, 2026 16:51
Summary:
Add the foundational data types, enums, style properties, and C API for
expressing CSS Grid layouts in Yoga.

Includes:
- Grid style types (GridLine.h, GridTrack.h, GridTrackType.h)
- Updated enums (Display::Grid, Align::Start/End, Justify::Auto/Stretch/Start/End)
- Grid event (LayoutPassReason::kGridLayout)
- Style property accessors and member variables
- Public C API (YGGridTrackList.h/cpp, YGNodeStyle grid setters/getters)
- Layout helpers updated for new enum values (Align.h, AbsoluteLayout.cpp,
  CalculateLayout.cpp/h partial)
- Node.h: relativePosition made public
- React Native mirror of all C++ changes

Differential Revision: D93946262
Summary:
Add the core grid layout computation and integrate it into the layout
dispatcher.

Includes:
- AutoPlacement.h: auto-placement algorithm for grid items
- GridLayout.h/cpp: grid layout entry point
- TrackSizing.h: track sizing algorithm
- CalculateLayout.cpp: grid dispatch block and #include
- CMakeLists.txt: add algorithm/grid/*.cpp glob
- React Native mirror of all C++ changes

Differential Revision: D93946253
Summary:
Add grid layout benchmarks.

Includes:
- YGGridBenchmark.c: 14 benchmark scenarios
- benchmarkgrid: shell script to run benchmarks
- CMakeLists.txt: benchmarkgrid target

Differential Revision: D93946260
Summary:
Add hand-written C++ tests for the grid layout algorithm.

Includes:
- Hand-written tests: AutoPlacementTest.cpp, CreateGridTrackTest.cpp
- Modified existing tests: YGAlignBaselineTest.cpp (+3 grid baseline tests),
  YGHadOverflowTest.cpp (+1 grid overflow test)

Differential Revision: D93946259
Summary:
Add Java/Kotlin bindings for CSS Grid support. Includes grid API classes
(YogaGridTrackList, YogaGridTrackValue, YogaGridTrackType), JNI bridge
updates, enum changes (YogaDisplay, YogaAlign, YogaJustify).

Also includes React Native Android mirror of all Java/Kotlin changes.

Differential Revision: D93946256
Summary:
Add JavaScript/WASM bindings for CSS Grid support. Includes embind
bindings, TypeScript types (YGEnums.ts), Node wrapper updates
(wrapAssembly.ts).

Existing generated JS tests are updated to import GridTrackType.

Differential Revision: D93946255
Summary:
Update gentest scripts to support CSS Grid properties. Adds grid style
extraction, grid property setup, display:grid handling, and grid-aware
LTR/RTL fixture support to the C++, Java, and JavaScript test emitters.

Differential Revision: D93946258
Summary:
Add HTML fixture files for CSS Grid tests and generated test output for
C++, Java, and JavaScript.

Includes:
- HTML fixture files defining grid layout test cases
- Generated C++ tests (YGGridTest.cpp, YGGridTestFlows.cpp, ~150 individual test files)
- Generated Java tests (YGGridTest.java, YGGridTestFlows.java, ~150 individual test files)
- Generated JavaScript tests (YGGridTest.test.ts, YGGridTestFlows.test.ts, ~150 individual test files)

Differential Revision: D93946254
Summary:
Pull Request resolved: facebook#1887

Add grid property support to the Yoga Playground website component.

Includes:
- Grid display mode support
- Grid template columns/rows properties
- Grid auto columns/rows properties
- Grid column/row start/end properties (including span support)
- Grid track value parsing (auto, fr, %, px, minmax)

Differential Revision: D93959518
@vercel
Copy link

vercel bot commented Feb 25, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
yoga-website Ready Ready Preview, Comment Feb 25, 2026 9:35pm

Request Review

@meta-cla meta-cla bot added the CLA Signed label Feb 25, 2026
@facebook-github-bot facebook-github-bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Feb 25, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants